<template>
  <div class="nav">
    <div class="navbar">
      <div class="navbar-left">
        <i v-if="hasBack" class="el-icon-arrow-left" @click="goBack"></i>
        <div class="nav-home" @click="goPath('index')">
          <img
            src=""
            alt=""
          />
          小萤星
        </div>
      </div>
      <div class="navbar-title">{{ title }}</div>
      <div v-if="showRight" class="navbar-right">
        <div class="vip" @click="goPath('pay')">购买VIP</div>
        <div class="more">
          <i class="el-icon-menu"></i>更多工具
          <div class="menu-content">
            <div class="com-productivity-pop_list-container">
              <div class="com-productivity-pop_poptitle">学术工具</div>
              <div class="com-productivity-pop_list">
                <div
                  v-for="item in navOptions1"
                  :key="item.title"
                  class="com-productivity-pop_item"
                  @click="goPath(item.path)"
                >
                  <img :src="item.icon" alt="" />
                  <span class="com-productivity-pop_item-title">{{
                    item.title
                  }}</span>
                </div>
              </div>
              <div class="com-productivity-pop_poptitle mt">非学术工具</div>
              <div class="com-productivity-pop_list">
                <div
                  v-for="item in navOptions2"
                  :key="item.title"
                  class="com-productivity-pop_item"
                  @click="goPath(item.path)"
                >
                  <img :src="item.icon" alt="" />
                  <span class="com-productivity-pop_item-title">{{
                    item.title
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { navOptions1, navOptions2 } from "../utils/config";
export default {
  name: "Nav",
  props: {
    hasBack: {
      type: Boolean,
      default: true,
    },
    showRight: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      navOptions1,
      navOptions2,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goPath(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  position: relative;
  height: 54px;
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1200px;
    padding: 0 40px;
    height: 54px;
    box-shadow: 0 2px 8px 1px #0000000f;
    font-family: PingFang SC-Regular, PingFang SC;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: 13px;
    color: #141414;
    z-index: 999;
    .navbar-left {
      height: 100%;
      gap: 12px;
      display: flex;
      align-items: center;
      .el-icon-arrow-left {
        cursor: pointer;
        font-size: 16px;
      }
      .nav-home {
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 24px;
          height: auto;
          margin-right: 12px;
          border-radius: 2px;
        }
      }
    }
    .navbar-title {
      font-weight: 700;
    }
    .navbar-right {
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      .vip {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        background: rgba(105, 101, 234, 0.08);
        border: 1px solid rgba(105, 101, 234, 0.16);
        border-radius: 5px;
        padding: 0 13px;
        color: #434343;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          background: rgba(105, 101, 234, .16);
        }
      }
      .more {
        cursor: pointer;
        position: relative;
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        &:hover .menu-content {
          display: block;
        }
        .el-icon-menu {
          color: #6965ea;
          margin-right: 12px;
        }
        .menu-content {
          display: none;
          position: absolute;
          right: -20px;
          top: 54px;
          border-radius: 4px;
          box-shadow: 0 2px 8px 1px #0000000f;
          z-index: 999;
          max-height: 80vh;
          width: 616px;
          background: #ffffff;
          border-radius: 12px;
          padding: 20px 0 20px 24px;
          box-sizing: border-box;
          &::before {
            content: "";
            position: absolute;
            right: 20px;
            top: -12px;
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-bottom: 6px solid #ffffff;
          }
          .com-productivity-pop_list-container {
            .com-productivity-pop_poptitle {
              height: 17px;
              font-size: 12px;
              font-weight: 400;
              color: #727272;
              position: relative;
              text-indent: 10px;
              &.mt {
                margin-top: 20px;
              }
              &::before {
                content: "";
                width: 3px;
                height: 12px;
                background: rgba(105, 101, 234, 0.7);
                border-radius: 2px 4px 4px 2px;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
              }
            }
            .com-productivity-pop_list {
              display: flex;
              flex-wrap: wrap;
              gap: 12px;
              margin-top: 12px;
              .com-productivity-pop_item {
                display: flex;
                align-items: center;
                width: 132px;
                height: 48px;
                background: #ffffff;
                border-radius: 8px;
                border: 1px solid #ededed;
                transition: all 0.3s;
                padding-left: 16px;
                position: relative;
                color: #141414;
                cursor: pointer;
                box-sizing: border-box;
                img {
                  width: 18px;
                  height: 18px;
                  border-radius: 3px;
                }
                .com-productivity-pop_item-title {
                  font-size: 14px;
                  margin-left: 8px;
                }
              }
            }
          }
        }
      }
    }
    // .navbar-right {
    //   cursor: pointer;
    //   position: relative;
    //   height: 54px;
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;
    //   padding: 0 20px;
    //   &:hover .menu-content {
    //     display: block;
    //   }
    //   .el-icon-menu {
    //     color: #6965ea;
    //     margin-right: 12px;
    //   }
    //   .menu-content {
    //     display: none;
    //     position: absolute;
    //     right: -20px;
    //     top: 54px;
    //     border-radius: 4px;
    //     box-shadow: 0 2px 8px 1px #0000000f;
    //     z-index: 999;
    //     max-height: 80vh;
    //     width: 616px;
    //     background: #ffffff;
    //     border-radius: 12px;
    //     padding: 20px 0 20px 24px;
    //     box-sizing: border-box;
    //     &::before {
    //       content: "";
    //       position: absolute;
    //       right: 20px;
    //       top: -12px;
    //       width: 0;
    //       height: 0;
    //       border: 6px solid transparent;
    //       border-bottom: 6px solid #ffffff;
    //     }
    //     .com-productivity-pop_list-container {
    //       .com-productivity-pop_poptitle {
    //         height: 17px;
    //         font-size: 12px;
    //         font-weight: 400;
    //         color: #727272;
    //         position: relative;
    //         text-indent: 10px;
    //         &.mt {
    //           margin-top: 20px;
    //         }
    //         &::before {
    //           content: "";
    //           width: 3px;
    //           height: 12px;
    //           background: rgba(105, 101, 234, 0.7);
    //           border-radius: 2px 4px 4px 2px;
    //           position: absolute;
    //           left: 0;
    //           top: 50%;
    //           transform: translateY(-50%);
    //         }
    //       }
    //       .com-productivity-pop_list {
    //         display: flex;
    //         flex-wrap: wrap;
    //         gap: 12px;
    //         margin-top: 12px;
    //         .com-productivity-pop_item {
    //           display: flex;
    //           align-items: center;
    //           width: 132px;
    //           height: 48px;
    //           background: #ffffff;
    //           border-radius: 8px;
    //           border: 1px solid #ededed;
    //           transition: all 0.3s;
    //           padding-left: 16px;
    //           position: relative;
    //           color: #141414;
    //           cursor: pointer;
    //           box-sizing: border-box;
    //           img {
    //             width: 18px;
    //             height: 18px;
    //             border-radius: 3px;
    //           }
    //           .com-productivity-pop_item-title {
    //             font-size: 14px;
    //             margin-left: 8px;
    //           }
    //         }
    //       }
    //     }
    //   }
    // }
  }
}
</style>
